<template>
  <x-layout-main>
    <template #header>
      <n-tabs v-model:value="templateType" size="small" type="card">
        <n-tab-pane :name="1" tab="员工管理"> </n-tab-pane>
        <n-tab-pane :name="2" tab="部门管理"> </n-tab-pane>
        <n-tab-pane :name="3" tab="岗位管理"> </n-tab-pane>
      </n-tabs>
    </template>
    <div class="m-dashboard">
      <AccountManage v-if="templateType === 1" />
      <DepartmentManage v-if="templateType === 2" />
      <RoleManage v-if="templateType === 3" />
    </div>
  </x-layout-main>
</template>

<script setup lang="ts">
  import { ref, computed, h } from 'vue'
  import { XForm, XButton, XDataTable, XDatePickerActions, XLayoutMain } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace, NText, NPopconfirm, NTabs, NTabPane } from 'naive-ui'
  import AccountEdit from '@/views/system/components/AccountEdit.vue'
  import { useStore } from '@/store'
  import AccountManage from '@/views/system/components/AccountManage.vue'
  import DepartmentManage from '@/views/system/components/DepartmentManage.vue'
  import RoleManage from '@/views/system/components/RoleManage.vue'
  const store = useStore()
  const templateType = ref(1)
</script>

<style lang="scss" scoped></style>
